<template>
  <div id="head">
    <div class="head">
      <div class="logo">
        <router-link to='/'>DATX</router-link>
      </div>
      <div style="flex:1;"></div>
      <div class="tab flex">
        <!--<router-link to='/'>{{$t("m.home")}}</router-link>-->
        <div class="drop">
          <p>{{nowLang.la}}</p>
          <div class="drop-lange">
            <ul>
              <li @click="chance(index)"  v-for="(item,index) of lange" :key="index">
                <img :src=item.pic alt="">
                {{item.la}}
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        lange:[
          {
            num:"0",
            la:"中文",
            statue:"zh",
            pic:require("../assets/images/zh.png")
          },
          {
            num:"1",
            la:"英文",
            statue:"en",
            pic:require("../assets/images/english.png")
          },
          {
            num:"2",
            la:"日文",
            statue:"ja",
            pic:require("../assets/images/ri.png")
          },{
            num:"3",
            la:"韩文",
            statue:"ko",
            pic:require("../assets/images/ha.png")
          },{
            num:"4",
            la:"德语",
            statue:"de",
            pic:require("../assets/images/de.png")
          },{
            num:"5",
            la:"法语",
            statue:"fr",
            pic:require("../assets/images/fa.png")
          },{
            num:"6",
            la:"西班牙语",
            statue:"es",
            pic:require("../assets/images/xi.png")
          },{
            num:"7",
            la:"泰语",
            statue:"th",
            pic:require("../assets/images/tai.png")
          },{
            num:"8",
            la:"马来语",
            statue:"id",
            pic:require("../assets/images/ma.png")
          },
          {
            num:"9",
            la:"俄语",
            statue:"ru",
            pic:require("../assets/images/ee.jpeg")
          },

        ],
        nowLang:{
          num:"0",
          la:"中文",
          statue:"zh",
          pic:require("../assets/images/zh.png")
        }
      }
    },
    created(){
      this.getLang()
    },

    methods:{
      getLang(){
        if(localStorage.getItem("lang")){
          this.$i18n.locale= localStorage.getItem("lang")
          this.lange.forEach(item=>{
            if(item.statue=== this.$i18n.locale){
              this.nowLang=item
            }
          })
        }else {
          this.$i18n.locale='zh';
          this.lange.forEach(item=>{
            if(item.statue=== this.$i18n.locale){
              this.nowLang=item
            }
          })
        }
      },
      chance(value){
        this.$i18n.locale = this.lange[value].statue;
        this.nowLang=this.lange[value];
        localStorage.setItem("lang",this.lange[value].statue)
      }
    }
  }
</script>
<style lang="less" scoped>
  #head {
    background: #333;
    .flex{
      display: flex;
    }
    .head {
      width: 1200px;
      margin: 0 auto;
      height: 75px;
      display: flex;
      align-items: center;
      .logo a{
        font-size: 40px;
        color: #fff;
      }

      .tab {
        a {
          display: inline-block;
          height: 75px;
          line-height: 75px;
          width: 180px;
          text-align: center;
          color: #fff;
        }
        p{
          display: inline-block;
          height: 75px;
          line-height: 75px;
          width: 180px;
          text-align: center;
          color: #fff;
          cursor: pointer;
        }
        .drop:hover .drop-lange{
          display: block;
        }
        .drop{
          position: relative;

          &-lange{
            margin-left: 20px;
            width: 150px;
            position: absolute;
            background: #fff;
            border: 1px solid rgba(0,0,0,0.2);
            /*text-align: center;*/
            display: none;

            ul{

              list-style: none;
              line-height: 40px;
              li{
                padding-left:20px;
                border-bottom: 1px solid rgba(0,0,0,0.2);
                cursor: pointer;
                img{
                  width: 50px;
                  height: 30px;
                  margin-bottom: -10px;
                }
              }
              li:hover{
                background: #efefef;
              }

            }
          }
        }
        /*.router-link-exact-active {*/
        /*background: rgba(255, 255, 255, 0.1);*/
        /*border-bottom: 3px solid #bfbcbc;*/
        /*}*/

      }
    }
  }
</style>

